<template>
<x-main>
  <view class="span">
    <x-cell title="用户主动支付" titleWidth="120px" :desc="`支持账单在到期日、到期日之前，用户自发在账单里直接付款，付款费率 ${orderConfig.userPayRate * 100}%。`">
      <template #value>
        <switch @change="onChange('userPay', $event)"  :checked="orderConfig.userPay" color="#ff8900"/>
      </template>
    </x-cell>

    <x-cell title="到期自动代扣" titleWidth="120px" :desc="`支持账单在到期日当天，系统自动帮您在用户的支付宝里自动代扣本订单的账单金额，付款费率 ${orderConfig.sysWithholdRate * 100}%。`">
      <template #value>
        <switch @change="onChange('sysWithhold', $event)" :checked="orderConfig.sysWithhold" color="#ff8900"/>
      </template>
    </x-cell>
  </view>
</x-main>
</template>

<script setup>
import orderStore from '@/stores/modules/order'
import {onLoad} from "@dcloudio/uni-app";
import {storeToRefs} from "pinia";
import {reactive, ref} from "vue";
const OrderStore = orderStore();
const {orderConfig} = storeToRefs(OrderStore);

const orderNo = ref("");

onLoad(async (option) => {
  // CompanyStore.getConfig();
  orderNo.value = option.orderNo
  await OrderStore.getConfig(orderNo.value);
})

const onChange = async (field, event) => {
  orderConfig.value[field] = event.detail.value;
  await OrderStore.setConfig(orderNo.value, orderConfig.value.userPay,
      orderConfig.value.userPayRate, orderConfig.value.sysWithhold, orderConfig.value.sysWithholdRate)
}

</script>

<style scoped lang="less">
  .span {
    background-color: #ffffff;
    border-radius: 10rpx;

    .desc {
      color: #999999;
      font-size: 28rpx;

    }
  }
</style>
